<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
   <template slot="footer"> 
      <a-button  @click="handleCancel">关闭</a-button>
      <a-button :loading="confirmLoading" type="primary" @click="handleOk">开始预测</a-button>
    </template>
    
    <a-card :bordered="false">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <!-- <a-form-item
            label="已选择的公式"
            :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
            :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
          >
            <a-tag color="blue">{{ selectionRow.formulaName }}</a-tag>
          </a-form-item> -->
          <a-form-model-item
            label="预测日期"
            :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
            :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
            prop="calcDate"
          >
            <a-date-picker v-model="model.calcDate"></a-date-picker>
          </a-form-model-item>
          <!-- <a-form-model-item
            label="槽号"
            :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
            :wrapperCol="{ lg: { span: 20 }, sm: { span: 17 } }"
            prop="dataSoltIds"
          >
            <j-select-data-slot
              placeholder="请选择槽号"
              :multi="true"
              :buttons="false"
              v-model="model.dataSoltIds"
            ></j-select-data-slot>
          </a-form-model-item> -->
        </a-form-model>
      </a-spin>
    </a-card>
    <a-modal :width="900" v-model="resultVisible" title="预测结果">
      <template>
         <a-result status="warning" title="找不到用于预测的数据"></a-result>
         <!-- <a-form layout="inline"> 
            <a-row style="margin-bottom: 12px;">
              <a-col :md="12" :xs="24">
                <a-form-item label="算法名称" :labelCol="{md: 4,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
                  {{ selectionRow.formulaName }}
                </a-form-item>
              </a-col>
              <a-col :md="12" :xs="24">
                <a-form-item label="计算日期" :labelCol="{md: 4,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
                  {{ selectDate}}
                </a-form-item>
              </a-col>
            </a-row> 
         </a-form> 
        <a-table
          ref="table" 
          size="middle"
          :scroll="{ x: true, y:400 }"
          bordered
          :columns="columns"
          :dataSource="resultList"
          class="j-table-force-nowrap"
          :pagination="false"
        >
        </a-table>  -->
      </template>
      <template slot="footer">
        <a-button @click="resultCancel">关闭</a-button>
      </template>
    </a-modal>
  </j-modal>
  <!-- {"result":2.516125202178955,"ref_value":0,"slot_no":"2001  ","remark":"过低"} -->
</template>

<script>
import moment from 'moment'
import { getAction, postAction } from '@/api/manage'
import JSelectDataSlot from '@/components/jeecgbiz/JSelectDataSlot2'
import '@/assets/less/TableExpand.less'
export default {
  name: 'runModal',
  components: { JSelectDataSlot },
  data() {
    return {
      title: '出铝量预测',
      width: 800,
      visible: false,
      disableSubmit: false,
      selectionRow: {},
      resultVisible: false,
      resultList: [],
      model: {
        formulaId: '',
        dataSoltIds: '',
        calcDate: '', //计算时间
      },
      selectDate:'',// =计算时间 格式 （yyyy-MM-dd）
      validatorRules: {
        dataSoltIds: [{ required: true, message: '请选择槽号!' }],
        calcDate: [{ required: true, message: '请选择计算时间!' }],
      },
      columns: [
        {
          title: '槽号', 
          dataIndex: 'slot_no',
          align: 'center',
          width: 140,
        },
        {
          title: '运算结果', 
          dataIndex: 'result',
          align: 'center',
          width: 200,
        },
        {
          title: '参考值', 
          dataIndex: 'ref_value',
          align: 'center',
          width: 260,
        },
        {
          title: '评判结果', 
          align: 'center',
          dataIndex: 'remark',
        },
      ],
      confirmLoading: false,
    }
  },
  methods: {
    show(selectionRow) {
      this.selectionRow = selectionRow
      this.title = '出铝量预测 - ' + " 【 " + this.selectionRow.modelName  + " 】 "
      this.confirmLoading = false
      this.resultVisible = false
      this.model = Object.assign(
        {},
        {
          formulaId: selectionRow.id,
          dataSoltIds: '',
          calcDate: moment(new Date()).format('YYYY-MM-DD'), //计算时间
          resultType: '',
        }
      )
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      let that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          setTimeout(() => {
            that.confirmLoading = false
            that.resultVisible = true
          }, 5000);
          return;
          var param = Object.assign({}, that.model)
          param.calcDate = moment(that.model.calcDate).format('YYYY-MM-DD')
          param.dataSoltIds = that.model.dataSoltIds.join(',')
          that.selectDate = param.calcDate
          postAction('/userFormula/userFormula/tryFormula', param).then((res) => {
            that.confirmLoading = false
            if (res.success) {
              that.resultVisible = true
              that.resultList = res.result
            } else {
              that.$message.error(res.message)
            }
          })
        }
      })
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    resultCancel() {
      this.resultVisible = false
    },
  },
}
</script>

<style scoped>
</style>